<template>
	<div>
		<el-card class="!border-none p-4" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				报价
			</div>
			<div class="main-color mt-[30px]">
				<el-row >
					<el-col :span="6">
						<div class="flex-col">
							<span class="mb-[10px]">进仓库编码</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class="mb-[10px]">提单号</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-card class="!border-none p-4 mt-[30px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				货物信息
			</div>
			<div class="main-color mt-[30px]">
				<el-row >
					<el-col :span="6">
						<div class="flex-col">
							<span class=" mb-[10px]">起运港</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class=" mb-[10px]">货物包装</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class="mb-[10px]">目的港</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class="mb-[10px]">货物件数</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col mt-[30px]">
							<span class="mb-[10px]">预计开航日期</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">货物毛重(kg)</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class=" mb-[10px]">截关时间</span>
							<el-select placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">货物体积(kg)</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-card class="!border-none p-4 mt-[30px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				进仓信息
			</div>
			<div class="main-color mt-[30px]">
				<el-row>
					<el-col :span="6">
						<div class="flex-col">
							<span class=" mb-[10px]">最晚进仓时间</span>
							<el-select placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class=" mb-[10px]">仓库名称</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class=" mb-[10px]">仓库营业性质</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class="  mb-[10px]">进仓库地址</span>
							<el-input v-model="value" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col mt-[30px]">
							<span class=" mb-[10px]">问路以及进仓库货物查询电话</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class=" mb-[10px]">仓库联系人</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class=" mb-[10px]">进仓库遇到问题电话</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<div class="mt-[20px] pl-[20px] main-color">
			<div>说明:</div>
			<div>1.以上货物包装均符合出口包装，包装类型包含但不限于角铁包装，以及胶合木板包装和带熏蒸标识的原木托盘包装。</div>
			<div>2.若产品包装时，有部分是裸露在外部,请仓库先行安排收货，并联系对应的货运公司提供裸装包含。</div>
			<div>3.公司所有产品均为机械类产品，不含任何液体，不含任何油，不含磁，不含任何危险成分等普货。</div>
			<div>4.货物存放在室内，不得存放在室外，以免产品损失，我司保留索赔的权利。</div>
			<div>5.所有在叉车搬运均需要小心，以免破损货物或者托盘。若产品有掉落或者漏，请及时和我们联系。投诉以及建议电话: 17317601762</div>
		</div>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]">
				<router-link :to="{
						path: getRoutePath('dealOrder.dealOrder/document')
				    }">
					<span>取消</span>
				</router-link>
			</el-button>
			<el-button class="w-[100px] bg-[#0054A6] h-[36px]" type="primary">生成</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	const value = ref('123432152')
	const options = ref<Array<any>>([
		{
			value: '选项1',
			label: '黄金糕'
		}, {
			value: '选项2',
			label: '双皮奶'
		},
	])
</script>

<style scoped>
	.flex-col{
		display: flex;
		flex-direction: column;
	}
</style>